<template>
	<view class="cunminyishi-page m-h100 bgcolor1">
		<u-sticky offset-top="44">
			<u-tabs class="bgcolor1 border-bottom" :list="list1" @click="changeClick" lineColor="#507EF7" lineWidth="40"
				:lineHeight="6" :activeStyle="{color:'#507EF7'}"></u-tabs>
		</u-sticky>
		<view class="p-2">
			<view class="flex align-center justify-between border-bottom pb-2 mb-2 item" v-for="(item,index) in dataList"
				:key="index" @click="navTo(item)">
				<text class="fs-28 ftcolor1">{{index + 1}}、{{item.title}}</text>
				<view class="flex flex-column text-right" style="min-width: 140px;">
					<text v-if="curType===1" :class="`fs-24 color${item.status}`">{{setStatus(item)}}</text>
					<text class="fs-24 ftcolor4">{{item.created_at}}</text>
				</view>
			</view>
		</view>
		<view class="text-center py-3" v-if="this.tempList.length === 15"><text class="fs-24 ftcolor2"
				@click="clickMore">查看更多</text></view>
		<view v-if="curType===1" class="addbtn flex align-center justify-center"
			@click="navTo('/pages/service/adddiscuss')"><img class="img" src="@/static/images/add.png" alt="" /></view>
		<noneBox v-if="dataList.length === 0"></noneBox>
	</view>
</template>

<script>
	import serviceApi from '@/api/serviceApi.js'
	export default {
		data() {
			return {
				list1: [{
					name: '村民议事',
				}, {
					name: '我的议事',
				}],
				curType: 0,
				dataList: [],
				tempList: [],
				page: 1
			}
		},
		onShow() {
			this.gz_cmys()
		},
		methods: {
			clickMore() {
				if (this.tempList.length === 15) {
					this.page++
					this.gz_cmys()
				}
			},
			setStatus(item) {
				switch (item.status) {
					case 0:
						return '待审核'
						break;
					case 1:
						return '已通过'
						break;
					case 2:
						return '驳回'
						break;
				}
			},
			gz_cmys() {
				serviceApi.gz_cmys({
					page: this.page,
					limit: 15,
					is_my: this.curType
				}).then(res => {
					this.tempList = res.data
					if (this.page === 1) {
						this.dataList = res.data
					} else {
						this.dataList = this.dataList.concat(res.data)
					}
				})
			},
			changeClick(item) {
				console.log(item)
				if (this.curType === item.index) return
				this.dataList = []
				this.curType = item.index
				this.gz_cmys()
			},
			navTo(item) {
				uni.setStorageSync('cunminyishidetails', item)
				uni.navigateTo({
					url: `/pages/service/cunminyishi-details?title=${this.list1[this.curType].name}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.cunminyishi-page {
		.item:last-child {
			border: 0;
		}

		.addbtn {
			width: 40px;
			height: 40px;
			background-image: linear-gradient(to bottom, #507EF7, #50abf7);
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			border-radius: 50%;
			position: fixed;
			right: 5px;
			bottom: 100px;
			z-index: 99;

			.img {
				width: 25px;
				height: 25px;
			}
		}

		.color0 {
			color: #ff9900
		}

		.color1 {
			color: #333333
		}

		.color2 {
			color: #fa3534
		}
	}
</style>